<template>
  <div>
    <section
      id="section-membership"
      class="d-flex flex-column align-items-center"
    >
      <SectionTitle title="魁牛会员" sub-title="About US" />
      <div>
        <!-- <MembershipItem
          title="公平晋升模式"
          desc="自购省钱、分享赚钱，魁牛平台赋能会员专属优享折扣，自购分享最高省40%，会员拥有更多分享推荐权限和方式。"
          imgSrc="/images/m/membership-0.png"
        /> -->
        <MembershipItem
          v-for="memberItem in memberships"
          :key="memberItem.id"
          :title="memberItem.title"
          :desc="memberItem.desc"
          :img-src="memberItem.imgSrc"
        />
      </div>
    </section>
    <ContactSection />
  </div>
</template>

<script>
import ContactSection from '@/components/m/ContactSection';
import SectionTitle from '@/components/m/SectionTitle';
import MembershipItem from '@/components/m/MembershipItem';

export default {
  components: {
    ContactSection,
    SectionTitle,
    MembershipItem,
  },
  layout: 'staticBanner',
  data() {
    return {
      memberships: [
        {
          id: 0,
          title: '公平晋升模式',
          desc:
            '自购省钱、分享赚钱，魁牛平台赋能会员专属优享折扣，自购分享最高省40%，会员拥有更多分享推荐权限和方式。',
          imgSrc: '/images/m/membership-0.png',
        },
        {
          id: 1,
          title: '超高分享收益',
          desc:
            '自购省钱、分享赚钱，魁牛平台赋能会员专属优享折扣，自购分享最高省40%，会员拥有更多分享推荐权限和方式。',
          imgSrc: '/images/m/membership-1.png',
        },
        {
          id: 2,
          title: '简单开设小店',
          desc:
            '一键申请入驻，商家通过魁牛平台管理、销售自己的铲平，数十万魁牛会员通过社交圈帮您分享、助您销售，魁牛平台更赋能商家多种营销工具让您轻松销售。',
          imgSrc: '/images/m/membership-2.png',
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/scss/m/_sectionTitle.scss';

#section-membership {
  background-color: #f3f3f3;
  padding-top: 30px;
  padding-bottom: 30px;
  .card {
    margin-bottom: 30px;
  }
  .card:first-of-type {
    margin-top: 18px;
  }
  .card:last-of-type {
    margin-bottom: 0px;
  }
}
</style>
